<template>
  <view class="charts-box">
    <qiun-data-charts type="line" :opts="opts" :chartData="chartData"/>
  </view>
</template>

<script>
export default {
  props: {
    runData: {
      type: Array
    }
  },
  data() {
    return {
      //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [15, 10, 0, 15],
        dataLabel: false,
        dataPointShape: false,
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true,
          labelCount: 12,
          rotateLabel: true,
          rotateAngle: 45,
          max: 9204
        },
        yAxis: {
          disabled: true,
          gridType: "dash",
          dashLength: 2,
          // data: [
          //   {
          //     min: 0,
          //     max: 150
          //   }
          // ]
        },
        extra: {
          line: {
            type: "curve",
            width: 2,
            activeType: "hollow",
            linearType: "custom",
            onShadow: true,
            animation: "horizontal"
          },
          markLine: {
            type: 'dash',
            data: []
          }
        }
      }
    };
  },
  computed: {
    chartData() {
      if (!this.runData.length) return {}
      this.runData = this.runData.map(item => {
        let date = new Date(parseInt(item.timestamp) * 1000)
        item.date = date.toFormat("MM.dd")
        return item
      })
      let xLine = this.runData.map(item => item.date)
      let yLine = this.runData.map(item => item.step)
      let maxStep = Math.max.apply(Math, this.runData.map(item => Number(item.step)))
      let maxItem = this.runData.find(item => item.step == maxStep)
      let markLines = [{
        value: maxItem.step,
        labelText: `${maxItem.date}  ${maxItem.step}步`,
        showLabel: true,
        labelAlign: 'left',
        labelOffsetX: 220
      }]
      this.opts.extra.markLine.data = markLines
      let chatObj = {
        categories: xLine,
        series: [
          {
            name: "步数",
            linearColor: [
              [
                0,
                "#1890FF"
              ],
              [
                0.25,
                "#00B5FF"
              ],
              [
                0.5,
                "#00D1ED"
              ],
              [
                0.75,
                "#00E6BB"
              ],
              [
                1,
                "#90F489"
              ]
            ],
            setShadow: [
              8,
              15,
              20,
              "#1890FF"
            ],
            data: yLine
          }
        ]
      };
      return JSON.parse(JSON.stringify(chatObj));
    }
  },
  onReady() {

  },
  methods: {}
};
</script>

<style scoped>
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  width: 100%;
  height: 300px;
}
</style>
